<template>
	<view>
		<uni-nav-bar title="提现" right-text="提现明细" fixed statusBar backgroundColor="transparent" :border="false"
			left-icon="left" @clickLeft="Back" @clickRight="Details"></uni-nav-bar>
		<view class="content flex flex-col">
			<view class="card info flex flex-col gap">
				<text class="title" style="font-weight: bold;">提现金额</text>
				<label class="flex gap items-center" style="font-size: 40rpx;">
					<text>¥</text>
					<input v-model="amount" type="number" style="font-size: 40rpx;" />
				</label>
				<view class="flex items-center gap">
					<text style="color: #717171;" class="balance" :value="'¥' + balance">可提现金额</text>
					<text style="color: #717171;" @click="All">全部提现</text>
				</view>
			</view>
			<radio-group @change="TypeChange" class="card flex flex-col" style="gap: 40rpx;">
				<!-- <label class="flex gap items-center">
					<image class="withdraw-type-icon" src="../../static/icons/wx.png"></image>
					<text class="title flex-1">微信支付</text>
					<radio value="0" class="withdraw-radio" color="#319eff" />
				</label>
				<label class="flex gap items-center">
					<image class="withdraw-type-icon" src="../../static/icons/zfb.png"></image>
					<text class="title flex-1">支付宝支付</text>
					<radio value="1" class="withdraw-radio" color="#319eff" />
				</label> -->
				<view class="flex justify-end items-center" @click="addCard.open()" style="gap: 6rpx;">
					<text style="padding-top: 2rpx;">添加银行卡</text>
					<uni-icons type="plus"></uni-icons>
				</view>
				<label class="flex gap items-center" v-for="e, i in bankCardList" :key="i">
					<image class="withdraw-type-icon"
						src="">
					</image>
					<view class="flex flex-col flex-1" style="gap: 10rpx;">
						<text class="title flex-1">{{e.bankname}}</text>
						<text class="title flex-1">{{e.cardnum_}}</text>
					</view>
					<uni-icons type="compose" @click="EditCard(e.id)"></uni-icons>
					<uni-icons type="trash" @click="DeleteCard(e.id)"></uni-icons>
					<radio :value="e.id" class="withdraw-radio" color="#319eff" />
				</label>
				<text v-if="!bankCardList.length"
					style="text-align: center;color: #717171;padding-bottom: 20rpx;">请至少添加一张银行卡</text>
			</radio-group>
		</view>
		<view class="confirm-button flex items-center justify-center" @click="Withdraw">
			<text>立即提现</text>
		</view>
		<uni-popup ref="addCard" type="center" style="overflow: auto;">
			<view class="bg-white add-card flex flex-col">
				<view class="flex justify-between items-center">
					<text style="padding-top: 2rpx;">添加银行卡</text>
					<uni-icons type="close" @click="PopupClose()"></uni-icons>
				</view>
				<uni-easyinput v-model="addCardInfo.name" placeholder="请输入持卡人姓名"></uni-easyinput>
				<uni-easyinput v-model="addCardInfo.bankname" placeholder="请输入银行名称"></uni-easyinput>
				<uni-easyinput v-model="addCardInfo.cardnum" placeholder="请输入卡号" type="number"></uni-easyinput>
				<uni-easyinput v-model="addCardInfo.openingbank" placeholder="请输入开户行名称(选填)"></uni-easyinput>
				<view class="flex justify-between">
					<view class="flex items-center justify-center add-button" @click="AddBankCard">确定</view>
					<view @click="PopupClose()" class="flex items-center justify-center add-button">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import config from '../../config/index.js'

	const amount = ref('')
	const balance = ref(0)
	const addCard = ref(null)
	const bankCardList = ref([])
	const addCardInfo = ref({
		name: '',
		bankname: '',
		cardnum: '',
		openingbank: ''
	})
	let AnchorId = ''
	let SelectCardId = ''
	let EditMode = false

	onMounted(() => {
		GetAnchorInfo()
	})

	/**
	 * @description 返回上一页
	 */
	function Back() {
		uni.navigateBack()
	}

	/**
	 * @description 提现明细
	 */
	function Details() {
		uni.navigateTo({
			url: `./withdraw-list?id=${AnchorId}`
		})
	}

	/**
	 * @description 全部提现
	 */
	function All() {
		amount.value = balance.value
	}

	/**
	 * @description 支付方式切换
	 * @param {Object} e
	 */
	function TypeChange(e) {
		SelectCardId = e.detail.value
	}

	async function GetAnchorInfo() {
		let {
			data: res
		} = await uni.request({
			url: config.baseUrl + '/app/queryAnchorInfoByMemberId?' + `member.id=${uni.getStorageSync('user').id}`,
			method: 'POST'
		})
		let {
			data,
			code
		} = res
		if (code == 200) {
			AnchorId = data.id
			balance.value = data.bluedia
		}
		GetBankCardList()
		WithdrawList()
	}

	function maskString(str) {
		// 如果字符串长度小于等于4，则直接返回原字符串
		if (str.length <= 4) {
			return str
		}
		// 获取字符串的最后4位
		const lastFour = str.slice(-4)
		// 创建掩码部分（用'*'填充）
		const mask = '*'.repeat(str.length - 4)

		// 拼接掩码和最后4位
		return mask + lastFour
	}

	/**
	 * @description 获取银行卡列表
	 */
	function GetBankCardList() {
		uni.request({
			url: config.baseUrl + '/app/anchorgetBankCardlist?' + `anchor.id=${AnchorId}`,
			method: 'POST'
		}).then(res => {
			let {
				data: resData
			} = res
			let {
				data
			} = resData
			bankCardList.value = data.map(item => {
				return {
					...item,
					cardnum_: maskString(item.cardnum)
				}
			})
		})
	}

	function PopupClose() {
		addCard.value.close()
		addCardInfo.value = {
			name: '',
			bankname: '',
			cardnum: '',
			openingbank: ''
		}
		EditMode = false
	}

	/**
	 * @description 添加或修改银行卡
	 */
	function AddBankCard() {
		if (!addCardInfo.value.name) {
			return uni.showToast({
				title: '请输入持卡人姓名',
				icon: 'none',
			})
		}

		if (!addCardInfo.value.bankname) {
			return uni.showToast({
				title: '请输入银行名称',
				icon: 'none',
			})
		}

		if (!addCardInfo.value.cardnum) {
			return uni.showToast({
				title: '请输入卡号',
				icon: 'none',
			})
		}

		let param = {
			...addCardInfo.value
		}

		if (EditMode) {
			param.id = addCardInfo.value.id
		} else {
			param['anchor.id'] = AnchorId
		}

		uni.request({
			url: config.baseUrl + (EditMode ? '/app/anchorEditBankcard' : '/app/anchorAddBankcard'),
			method: 'POST',
			data: param,
			header: {
				"Content-Type": "application/x-www-form-urlencoded"
			}
		}).then(res => {
			let {
				data: resData
			} = res
			let {
				code
			} = resData
			if (code == 200) {
				uni.showToast({
					title: '成功',
					icon: 'success'
				})
				PopupClose()
				GetBankCardList()
			}
		})
	}

	/**
	 * @description 修改银行卡
	 */
	function EditCard(id) {
		let find = bankCardList.value.find(item => item.id == id)
		addCardInfo.value = find
		EditMode = true
		addCard.value.open()
	}
	
	
	/**
	 * @description 删除银行卡
	 * @param {Object} id 银行卡id
	 */
	function DeleteCard(id) {
		uni.showModal({
			title: '提示',
			content: '确定删除该银行卡吗？',
			success: (res) => {
				if (res.confirm) {
					uni.request({
						url: config.baseUrl + '/app/anchorDelBankcard',
						method: 'POST',
						header: {
							"Content-Type": "application/x-www-form-urlencoded"
						},
						data: {
							id
						}
					}).then(res => {
						let {
							data: resData
						} = res
						let {
							code
						} = resData
						if (code == 200) {
							uni.showToast({
								title: '成功',
								icon: 'success'
							})
							SelectCardId = ''
							GetBankCardList()
						}
					})
				}
			}
		})
	}

	/**
	 * @description 提现
	 */
	function Withdraw() {
		if (!SelectCardId) {
			return uni.showToast({
				title: '请选择银行卡',
				icon: 'none',
			})
		}
		
		if (!amount.value) {
			return uni.showToast({
				title: '请输入提现金额',
				icon: 'none',
			})
		}

		if (amount.value > balance.value) {
			return uni.showToast({
				title: '余额不足',
				icon: 'none',
			})
		}

		uni.request({
			url: config.baseUrl + '/app/anchorApplyWithdrawal',
			method: 'POST',
			header: {
				"Content-Type": "application/x-www-form-urlencoded"
			},
			data: {
				'anchor.id': AnchorId,
				'bankcard.id': SelectCardId,
				amount: amount.value
			}
		}).then(res => {
			let {
				data: resData
			} = res
			let {
				code
			} = resData
			if (code == 200) {
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				GetAnchorInfo()
			}
		})
	}
	
	function WithdrawList() {
		uni.request({
			url: config.baseUrl + '/app/anchorgetCashmanagelist',
			method: 'POST',
			header: {
				"Content-Type": "application/x-www-form-urlencoded"
			},
			data: {
				'anchor.id': AnchorId
			}
		}).then(res => {
			console.log(res)
			let {
				data: resData
			} = res
			let {
				data
			} = resData
		})
	}
</script>

<style>
	page {
		--confirm-button-height: 100rpx;
	}

	.content {
		padding: 20rpx 20rpx 60rpx;
		gap: 60rpx;
	}

	.title {
		font-size: 30rpx;
	}

	.gap {
		gap: 20rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.info {
		box-shadow: 0 2px 2px 1px rgba(49, 158, 255, .5);
		padding: 30rpx;
	}

	.balance::after {
		content: attr(value);
		color: #333;
		font-weight: bold;
	}

	.withdraw-type-icon {
		width: 74rpx;
		height: 74rpx;
	}

	.withdraw-radio {
		zoom: 70%;
	}

	.confirm-button {
		position: fixed;
		bottom: 60rpx;
		left: 20rpx;
		right: 20rpx;
		height: var(--confirm-button-height);
		background: #319eff;
		border-radius: calc(var(--confirm-button-height) / 2);
	}

	.confirm-button>text {
		color: #fff;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: bold;
	}

	.add-card {
		padding: 30rpx;
		gap: 20rpx;
		border-radius: 20rpx;
	}

	.add-button {
		width: 160rpx;
		height: 80rpx;
		background: #319eff;
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.add-button:nth-child(2) {
		background: #e5e5e5;
		color: #333;
	}
</style>